<template>
  <div class="content">
    <div class="search_box">
      <input type="text" placeholder="请输入要查询的召唤师名" />
      <input type="button" value="搜 索" />
    </div>
    <div class="main_box">
      <div class="main_bar">
        <router-link to="/message" tag="div">召唤师信息</router-link>
        <router-link to="/record" tag="div">个人战绩</router-link>
      </div>
      <div class="main_content">
        <transition name="show" mode="out-in">
          <router-view />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.content {
  margin-top: 60px;
  width: 1096px;
  padding: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .search_box {
    margin: 30px;
    text-align: center;
    width: 100%;
    input {
      border: none;
      height: 46px;
      font-size: 16px;
      &:hover {
        box-shadow: 1px 1px 6px #4971eb;
      }
      &[type="text"]::placeholder {
        color: #c8c8c8;
      }
      &[type="text"] {
        width: 40%;
        box-sizing: border-box;
        border: 2px solid #4971eb;
        border-radius: 16px 0 0 16px;
        padding: 0 20px;
      }

      &[type="button"] {
        width: 10%;
        color: #fff;
        background-image: linear-gradient(90deg, #4971eb, #65b8fc);
        border-radius: 0 16px 16px 0;
        cursor: pointer;
      }
    }
  }
  .main_box {
    width: 100%;
    .main_bar {
      margin-bottom: 20px;
      display: grid;
      grid-template-columns: repeat(2, 50%);
      div {
        font-size: 19px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
        &:hover {
          color: #4971eb;
        }
      }
      .bar_active {
        color: #4971eb;
        border-bottom: 4px solid #65b8fc;
      }
    }
  }
  .main_content {
    padding: 10px;
  }
}
</style>